<template>
    <div class="fullScreen bg-c-wh">
        <sc-header></sc-header>
        <description v-if="this.$store.state.bjpk10Desc"></description>
        <div class="tx-s-14">
            <!-- 期数、倒计时、历史数据 -->
            <lot-overview :type="'bjpk10'"></lot-overview>
            <!-- 提示 -->
            <div class="flex-box flex-ac flex-pe pad-tb">
                <div class="iconSize-125 icon_prompt marg-05"></div>
                <div class="tx-s-14 mar-r" @click="showDesc()">玩法提示</div>
            </div>
            <!-- 冠亚和数字 -->
            <div v-if="oddsData != null" v-show="this.$store.state.bjpk10Type == 0">
                <div class="scroll-box bg-c-g">
                    <div class="title-lot">冠亚和</div>
                    <div class="flex-box flex-wp flex-pj opt-pad">
                        <div :id="key" 
                        class="option-box wd-23 bg-c-wh" 
                        :class="{ 'bg-c-sel' : options.indexOf(key) > -1 }" 
                        v-for="(value, key) in lotteryGYH" 
                        :key="key" 
                        :data-playType="value[1]" 
                        :data-content="value[2]" 
                        @click="chooseLot(key,value[0])">
                            <div class="option-num">{{ value[0] }}</div>
                            <div class="option-num tx-c-r">{{ oddsData.gyzh[key] | noOdds(countDown.status) }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 冠亚和1至5 --> 
            <div v-if="oddsData != null" v-show="this.$store.state.bjpk10Type == 1">
                <div class="scroll-box bg-c-g">
                    <div v-for="(title, key, index) in lotteryGYH15" :key="index">
                        <div class="title-lot">{{ title }}</div>
                        <!-- 数字部分 -->
                        <div class="flex-box flex-wp opt-pad">
                            <div :id="key+'_'+item" 
                            class="flex-box flex-pc wd-16" 
                            v-for="item in 10" :key="item" 
                            :data-playtype="key" 
                            :data-content="item" 
                            @click="chooseLot(key+'_'+item,item,title)">
                                <div class="option-box-cir bg-c-wh" :class="{'bg-c-sel' : options.indexOf(key+'_'+item) > -1}">
                                    <div class="option-num">{{ item }}</div>
                                    <div class="option-num tx-c-r">{{ oddsData.pmyds | noOdds(countDown.status) }}</div>
                                </div>
                            </div>
                        </div>
                        <!-- 汉字部分 -->
                        <div class="flex-box flex-wp opt-pad">
                            <div :id="key+'_'+item[2]" 
                            class="option-box wd-23 bg-c-wh" 
                            :class="{ 'bg-c-sel' : options.indexOf(key+'_'+item[2]) > -1 }" 
                            v-for="(item, index) in lotteryGYH15lh" 
                            :key="index" 
                            :data-playtype="key+'_'+item[1]" 
                            :data-content="item[2]"
                            @click="chooseLot(key+'_'+item[2],item[0],title)">
                                <div class="option-num">{{ item[0] }}</div>
                                <div class="option-num tx-c-r">{{ item[1] | lhOdds(oddsData.sdsm) | noOdds(countDown.status) }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 冠亚和6至10 --> 
            <div v-if="oddsData != null" v-show="this.$store.state.bjpk10Type == 2">
                <div class="scroll-box bg-c-g">
                    <div v-for="(title, key, index) in lotteryGYH61" :key="index">
                        <div class="title-lot">{{ title }}</div>
                        <!-- 数字部分 -->
                        <div class="flex-box flex-wp opt-pad">
                            <div :id="key+'_'+item" 
                            class="flex-box flex-pc wd-16" 
                            v-for="item in 10" 
                            :key="item" 
                            :data-playtype="key" 
                            :data-content="item" 
                            @click="chooseLot(key+'_'+item,item,title)">
                                <div class="option-box-cir bg-c-wh" :class="{'bg-c-sel':options.indexOf(key+'_'+item)>-1}">
                                    <div class="option-num">{{ item }}</div>
                                    <div class="option-num tx-c-r">{{ oddsData.pmyds | noOdds(countDown.status) }}</div>
                                </div>
                            </div>
                        </div>
                        <!-- 汉字部分 -->
                        <div class="flex-box flex-wp opt-pad">
                            <div :id="key+'_'+item[2]" 
                            class="option-box wd-23 bg-c-wh" 
                            :class="{ 'bg-c-sel' : options.indexOf(key+'_'+item[2]) > -1 }" 
                            v-for="(item, index) in lotteryGYH61dx" 
                            :key="index" 
                            :data-playtype="key+'_'+item[1]" 
                            :data-content="item[2]" 
                            @click="chooseLot(key+'_'+item[2],item[0],title)">
                                <div class="option-num">{{ item[0] }}</div>
                                <div class="option-num tx-c-r">{{ oddsData.sdsm.dxds | noOdds(countDown.status) }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- footer -->
        <div class="flex-box flex-pj lotteryFooter tx-s-14">
            <div class="tx-c-r bor-r-g footer-btn" @click="cancel">重置</div>
            <div class="flex-box flex-f1">
                <input id="money" class="input-ol-n wd-fh tx-c" type="number" placeholder="请输入单注金额" />
            </div>
            <div class="tx-c-g bor-l-g footer-btn" @click="confirm">确定</div>
        </div> 
    </div>
</template>
<script type="text/ecmascript-6">
import { mapGetters } from "vuex"
import ScHeader from "../../components/lottery/sc-header"
import description from "../../components/lottery/description"
import LotOverview from "../../components/lottery/lotOverview"
import { lotteryGYH, lotteryGYH15, lotteryGYH15lh, lotteryGYH61, lotteryGYH61dx } from '../../common/js/data' 
import { deadAwar } from '../../common/js/axiosUtil'
import Trans from '../../common/js/eventTrans'
export default {
    data () {
        return {
            lotteryGYH : lotteryGYH, // 冠亚和数字
            lotteryGYH15 : lotteryGYH15, // 冠亚和1至5名
            lotteryGYH15lh : lotteryGYH15lh, // 冠亚和1至5名汉字
            lotteryGYH61 : lotteryGYH61, // 冠亚和6至10名
            lotteryGYH61dx : lotteryGYH61dx, // 冠亚和6至10名汉字
            countDown : {}, // 当前数据 
            oddsData : null, // 赔率
            payPriceMin : '',
            payPriceMax : '',
            options : [], // 选中id
            selData : [] // 选中数据
        }
    },
    created () {
        this.getData()
    }, 
    filters : {
        noOdds : function(value, status){
            if(status == 1){
                return value
            }else{
                return '--'
            }
        },
        lhOdds : function(value, odds){
            // 龙虎赔率选取
            if(value == '_lh'){
                return odds.loongh
            }else{
                return odds.dxds
            }
        }
    },
    mounted () {
        var _this = this
        Trans.$on('togBjpk10Tab', function (msg) {
            let money = document.getElementById("money")
            money.value = ''
            _this.options = []
            _this.selData = []
        })
    }, 
    methods: { 
        // 获取彩票数据
        getData () {
            this.$toast('加载中...', 1000000)
            let time = JSON.stringify(new Date().getTime())
            let token = this.md5(time + '4baea6bc1bd66a7e00aa778d4aca6720')
            let params = new URLSearchParams()
            params.append('timeStamp', time)
            params.append('token', token)
            params.append('uid', this.bfUserInfo.uid) 
            params.append('type', 'bjpk10') 
            deadAwar(params)
            .then((response)=> { 
                this.$toastClose()
                if(response.data.code == "200"){ 
                    let data = response.data.data
                    this.countDown = data.countDown 
                    this.oddsData = data.oddsData 
                    this.payPriceMin = data.min
                    this.payPriceMax = data.max
                } else {
                    this.$logAgain(response.data.msg)
                } 
            })
            .catch((error)=> {
                this.$toast('请求服务失败', 2000)
            })
        },
        // 选择彩票玩法
        chooseLot (option,name,title) { 
            let sel = document.getElementById(option)
            let playType = sel.dataset.playtype
            let content = sel.dataset.content
            let odds = ''
            // 圆形选项时多嵌套一层子div，需分别获取odds
            if(sel.className.indexOf('wd-16')>-1){
                odds = sel.children[0].children[1].innerText
            }else{
                odds = sel.children[1].innerText
            }
            let selObj = {
                'playType' : playType,
                'content' : content,
                'odds' : odds,
                'name' : name,
                'title' : title || '冠亚和',
                'issue' : this.countDown.issue
            } 
            if(this.options.indexOf(option) > -1){
                this.options = this.options.filter(n => n !== option)
                // 查找取消项数据下标并清除数据 
                for (var i = 0; i < this.selData.length; i++) {
                    if (this.selData[i] == selObj) this.selData.splice(i, 1)
                }
            }else{ 
                this.options.push(option)
                this.selData.push(selObj)
            } 
        }, 
        // 重置，清空所有操作
        cancel () { 
            document.getElementById("money").value = ''
            this.options = []
            this.selData = []
        },
        // 确定
        confirm () {
            if(this.$store.state.buyStatus == 0){
                this.$alert('已封盘')
            }else if(this.$store.state.buyStatus == -1){ 
                this.$alert('已关盘')
            }else if(this.$isEmptyObject(this.options)){
                this.$toast('未下注', 2000)
            }else if(this.$store.state.buyStatus == 1){
                let money = document.getElementById('money').value 
                this.$router.push({
                    path: '/bjpk10Buy',
                    query: {
                        selData : this.selData,
                        inputPrice : money || this.payPriceMin,
                        payPriceMin : this.payPriceMin,
                        payPriceMax : this.payPriceMax
                    }
                })
            }
        },
        // 打开玩法提示
        showDesc () {
            this.$store.commit('changeBjpk10Desc', true)
        }
    },
    components: {
        ScHeader,
        description,
        LotOverview
    },
    computed: {
        ...mapGetters({
            bfUserInfo: "bfUserInfo"
        })
    }
};
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
    .pad-lr
        padding : 0.75rem 0.5rem 
    .past-issue
        padding : .75rem 
    .mar-r
        margin-right : .5rem 
    .scroll-box
        position : fixed 
        top : 9.75rem
        bottom : 3.25rem
        width : 96%
        margin : 0 2%
        overflow: auto
    .scroll-box::-webkit-scrollbar
        display : none 
    .opt-pad
        padding : .5rem 1%
    .option-box
        height : 3rem
        border : 1px solid #d2d2d2
        border-radius : .25rem .25rem
        margin : .125rem 0.5%
    .option-box-cir
        width : 3rem
        height : 3rem
        border : 1px solid #d2d2d2
        border-radius : 100% 100%
    .wd-23
        width : 23%
    .wd-16
        width : 15%
        margin : .125rem 0.75% 
    .option-num
        line-height : 1.5rem
        text-align : center
    .bg-c-sel
        background : #febd33
    .footer-btn
        padding : 0 1rem
        margin : 0.75rem 0 
</style> 